<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    append-to-body
    :close-on-click-modal="false"
    @close="closeDialog()"
    :visible="visible"
    width="800px"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="110px"
    >
      <el-form-item label="规则类别" prop="ruleType">
        <el-radio-group v-model="dataForm.ruleType">
          <el-radio label="1" border>积分规则</el-radio>
          <el-radio label="2" border>分润规则</el-radio>
          <el-radio label="3" border>提现规则</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="积分规则说明" prop="ruleContent">
        <quill-editor class="editor" v-model="dataForm.ruleContent" ref="myQuillEditor" :options="editorOption">
        </quill-editor>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" >
      <div style="margin-top:30px">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit"
          >确定</el-button
        >
      </div>
      
    </span>
  </el-dialog>
</template>

<script>
import { getObj, addObj, putObj } from "@/api/platform/rule";
import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  props:{
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      canSubmit: false,
      dataForm: {
        status:'1'
      },
      dataRule: {
        ruleType: [
          { required: true, message: "规则分类不能为空", trigger: "blur" },
        ],
        ruleContent: [
          { required: true, message: "规则内容不能为空", trigger: "blur" },
        ]
      },

      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入正文'
      },
    };
  },
  components: {
    quillEditor
  },
  methods: {
    init(id) {
      this.canSubmit = true;
      if(id){
        getObj(id).then((response) => {
          this.dataForm = response.data.data;
        });
      }
      
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          if (this.dataForm.id) {
            putObj(this.dataForm)
              .then((data) => {
                this.$notify.success("修改成功");
                this.$emit("refreshDataList");
                this.closeDialog()
              })
              .catch(() => {
                this.canSubmit = true;
              });
          } else {
            addObj(this.dataForm)
              .then((data) => {
                this.$notify.success("添加成功");
                this.$emit("refreshDataList");
                this.closeDialog()
              })
              .catch(() => {
                this.canSubmit = true;
              });
          }
        }
      });
    },
    //重置表单
    closeDialog() {
      this.$emit('update:visible', false)
    },
  },
};
</script>

<style scoped>
.editor {
  line-height: normal !important;
  height: 400px;
}
</style>
